---
type: tutorial
unitTitle: Construcción y diseño con componentes de Astro UI
title: 'Check in: Unidad 3 - Componentes'
i18nReady: true
description: |-
  Tutorial: Crea tu primer blog con Astro —
  Crea componentes Astro para reutilizar el código de los elementos comunes de tu sitio web.
---
import Badge from '~/components/Badge.astro';
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';


Ahora que los archivos `.astro` y `.md` generan páginas enteras en tu sitio web, ¡es hora de crear y reutilizar fragmentos más pequeños de HTML con componentes de Astro!

## Mirando hacia el futuro

En esta unidad, aprenderás a crear **componentes de Astro** para reutilizar el código de los elementos comunes de tu sitio web. 

Construirás:
- Un componente de navegación que presenta un menú de enlaces a sus páginas 
- Un componente de pie de página para incluir en la parte inferior de cada página
- Un componente de redes sociales, utilizado en el pie de página, que enlaza con las páginas de perfil.
- Un componente Hamburger interactivo para alternar la navegación en el móvil

A lo largo del proceso, utilizarás CSS y JavaScript para crear un diseño adaptable que reaccione a los tamaños de pantalla y a las entradas del usuario.



<Box icon="check-list">
## Checklist

<Checklist>
- [ ] ¡Estoy listo para construir algunos componentes Astro!
</Checklist>
</Box>